/*
 * @Author: luoqi
 * @Date: 2022-04-15 18:50:17
 * @LastEditors: luoqi
 * @LastEditTime: 2022-04-27 15:43:54
 * @Description: 
 */
import React,{ useState,useRef } from 'react';
import {  Button,Modal,Form, Input, Radio,Select,Upload, message } from 'antd';
import { Player } from "video-react";
const { Option } = Select;



const DetailVideo = (props) => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const video=useRef()
  const showModal = () => {
    setIsModalVisible(true);
  };
  const handleCancel = () => {
    video.current.pause()
    setIsModalVisible(false);
  };


  return (
    <div>
      <Button type="primary" ghost onClick={showModal}>预览</Button>
      <Modal title={props.title} width={800} visible={isModalVisible}  onCancel={handleCancel} centered footer={null}>
        <video src={props.url}  ref={video} controls="controls" style={{width:"750px"}}></video>
      </Modal>
    </div>
  );
}

export default  DetailVideo;
